<template>
	<view>
		<view class="gedan_top">
			<view class="left">
				<image src="../../static/logo.png"></image>
			</view>
			<view class="right">
				<view class="right_top">爽歪歪爽歪歪爽歪歪爽歪歪爽歪歪</view>
				<view class="right_bm">
					<text class="right_bm_l"></text>
					<text class="right_bm_r">周余</text>
				</view>
			</view>
		</view>
		<view class="gedan_btm">
			<view class="_top">
				<text class="_top_l">共39首</text>
				<text :class="isClick ? '_top_r_y':'_top_r_n'" @click="isClickHandle">{{ isClick? "+ 收藏(2306)" : "已收藏" }}</text>
			</view>
			<view class="_btm">
				<scroll-view :scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
					<view class="_btm_v" @click="toPlay">
						<view class="_btm_l">
							<view class="_btm_l_t">1 珊瑚海</view>
							<text class="_btm_l_b">周杰伦</text>
						</view>
						<view class="_btm_r"></view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	export default {
		components: {
			uniTag
		},
		data() {
			return {
				isClick: true,
				scrollTop: 0
			}
		},
		methods: {
			isClickHandle() {
				this.isClick = !this.isClick
			},
			scroll(e) {
				// console.log(e)
				this.scrollTop = e.detail.scrollTop
			},
			toPlay () {
				uni.navigateTo({
					url: "../music_play/music_play?id=106"
				})
			}
		}
	}
</script>

<style lang="scss">
	.gedan_top {
		display: flex;
		width: 750rpx;
		height: 592rpx;
		background-color: $uni-color-warning;
		padding: 0 36rpx;

		.left {
			width: 196rpx;
			height: 196rpx;
			margin-right: 32rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			display: flex;
			height: 196rpx;
			flex-direction: column;
			justify-content: space-between;

			.right_top {
				width: 388rpx;
				height: 100rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 50rpx;
				letter-spacing: 6rpx;
			}

			.right_bm {
				display: flex;
				align-items: center;

				.right_bm_l {
					display: inline-block;
					width: 60rpx;
					height: 60rpx;
					background: url(../../static/tianjiagedan.png);
					background-size: 60rpx 60rpx;
				}

				.right_bm_r {
					width: 84rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 40rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	.gedan_btm {
		position: fixed;
		box-sizing: border-box;
		top: 230rpx;
		width: 750rpx;
		height: 1200rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 0 12rpx 0 48rpx;

		._top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 16rpx 0;

			._top_l {
				width: 104rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(156, 156, 156, 1);
				line-height: 44rpx;
			}

			._top_r_y {
				width: 190rpx;
				height: 80rpx;
				background: url(../../static/bg.png) no-repeat center;
				line-height: 80rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}

			._top_r_n {
				width: 190rpx;
				height: 80rpx;
				background-color: #8F8F94;
				line-height: 80rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				border-radius: 40rpx;
			}
		}

		._btm {
			margin: 10rpx 0;

			scroll-view {
				height: 870rpx;
				._btm_v {
					display: flex;
					justify-content: space-between;
					height: 100rpx;

					._btm_l {
						display: flex;
						flex-direction: column;
						align-items: center;

						._btm_l_t {
							width: 132rpx;
							height: 44rpx;
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 600;
							color: rgba(156, 156, 156, 1);
							line-height: 44rpx;
						}

						._btm_l_b {
							width: 72rpx;
							height: 34rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(156, 156, 156, 1);
							line-height: 34rpx;
						}
					}

					._btm_r {
						width: 48rpx;
						height: 48rpx;
						background: url(../../static/gedan03.png) no-repeat center;
						margin-right: 34rpx;
					}
				}
			}
		}
	}
</style>
